import { searchTreeOrganization } from '@/services/api/api-cues-submit';
import { getCuesTopicDetails } from '@/services/api/api-county';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Descriptions, Divider, Space, Spin, Tag } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { useAccess, useModel } from 'umi';
import { DrawerForm } from '@ant-design/pro-components';
import TableTopicPlan from '../TableCounty/TableTopicPlan';

interface DetailsActiveProps {
  table: string;//table 使用位置  
  tableAdoptAccountId?: string | undefined;
  id: string | undefined;
  name: string | undefined;
  onRefurbish: () => void;
  countyKey: string
}

const DetailsTopic: React.FC<DetailsActiveProps> = (props) => {
  const { table, tableAdoptAccountId, id, name, onRefurbish, countyKey } = props;
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  const [topicDetails, setTopicDetailsState] = useState<CountyData.TopicDetails>();

  /**
   * 获取 详情
   * @param key
   */
  const getTopicDetails = async () => {
    try {
      console.log(countyKey);
      const response = await getCuesTopicDetails({ id, countyKey });
      if (response.code === 0) {
        setTopicDetailsState(response.data);
      }
    } catch (error) { }
  };

  /**
   * 获取 详情
   */
  useEffect(() => {
    getTopicDetails();
  }, []);

  const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

  /**
   * 加载 组织 列表
   * @param key
   */
  const treeOrganizationData = async () => {
    try {
      const response = await searchTreeOrganization();
      if (response.code === 0) {
        setArticleOrganizationState(response.data);
      }
    } catch (error) { }
  };



  const filter = (inputValue: string, path: DefaultOptionType[]) =>
    path.some(
      (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  return (
    // <PageContainer
    //   header={{
    //     title: (
    //       <div
    //         style={{
    //           display: 'flex',
    //           alignItems: 'center',
    //           justifyContent: 'center',
    //         }}
    //       >
    //         {topicDetails != undefined && (
    //           <Tag
    //             color={
    //               topicDetails?.run === 1 ? 'green' : topicDetails?.run === 2 ? 'red' : 'orange'
    //             }
    //           >
    //             {topicDetails?.run === 1 ? '进行中' : topicDetails?.run === 2 ? '已结束' : '已暂停'}
    //           </Tag>
    //         )}
    //         <a>{name}</a>
    //       </div>
    //     ),
    //     breadcrumb: {
    //       items: [],
    //     },
    //     extra: [

    //     ],
    //   }}
    //   onBack={() => onBack()}
    // >
    <DrawerForm
      key="details_details_drawer_form"
      title={
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {topicDetails != undefined && (
            <Tag
              color={
                topicDetails?.run === 1 ? 'green' : topicDetails?.run === 2 ? 'red' : 'orange'
              }
            >
              {topicDetails?.run === 1 ? '进行中' : topicDetails?.run === 2 ? '已结束' : '已暂停'}
            </Tag>
          )}
          <a>{name}</a>
        </div>
      }
      drawerProps={{
        // maskClosable: false,
        width:1000,
        destroyOnClose: true,
      }}
      trigger={<a >{name}</a>}
      onOpenChange={(visible) => {
        if (visible) {
          getTopicDetails();
        } else {
          onRefurbish();
        }
      }}
      submitter={
        false
      }
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={topicDetails === undefined}
      >
        <ProCard>
          <Descriptions size="small">
            <Descriptions.Item label="创建时间">{topicDetails?.createdTime}</Descriptions.Item>
            <Descriptions.Item label="截止时间">{topicDetails?.deadline}</Descriptions.Item>
            <Descriptions.Item label="创建单位">
              {topicDetails?.createdOrganizationName}
            </Descriptions.Item>
            <Descriptions.Item label="创建人">{topicDetails?.createdAccountName}</Descriptions.Item>
            <Descriptions.Item label="联系方式">
              {topicDetails?.createdAccountPhone}
            </Descriptions.Item>
          </Descriptions>
          {/* {(access.线索上报x选题计划x配置x管理员 || topicDetails?.isCreatedAccount === 1) && ( */}
          <>
            <Divider />
            <ProCard
              title="指派报送单位"
              ghost
              collapsible
              defaultCollapsed
              onCollapse={(collapse) => console.log(collapse)}
              style={{ lineHeight: 2 }}
            >
              {topicDetails?.assignOrganizations?.map((item) => (
                <Tag>{item.name}</Tag>
              ))}
            </ProCard>
            {/* <Descriptions layout="vertical" size="small">
              <Descriptions.Item span={4}>
                <Space wrap>
                  {topicDetails?.assignOrganizations?.map((item) => (
                    <Tag>{item.name}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions> */}
            <Divider />
            <Descriptions layout="vertical" size="small">
              <Descriptions.Item label="指派阅读、录用记者" span={4}>
                {topicDetails?.isShare == 1 ? (
                  <Space wrap>
                    {topicDetails?.shareAccounts?.map((item) => (
                      <Tag>{item.name}</Tag>
                    ))}
                  </Space>
                ) : (
                  '自己'
                )}
              </Descriptions.Item>
            </Descriptions>
          </>
          {/* )} */}
        </ProCard>
      </Spin>
      {topicDetails?.plans?.map((item) => {
        return <TableTopicPlan key="table_topic_plan" run={topicDetails?.run} plan={item} length={topicDetails?.plans.length} countyKey={countyKey}/>;
      })}
    </DrawerForm>
  );
};

export default DetailsTopic;
